<template>
    <view class="content">
        <van-nav-bar :title="scrolling? navBarTitle : '' " left-arrow @click-left="onClickLeft" id="navBar"> </van-nav-bar>

        <scroll-view class="scroll-content" scroll-y :lower-threshold="80" @scroll="scrollPage" show-scrollbar="false">
            <view class="pageTop" :class="{'pageTopStyle':afterSalesTotalStatus == 6}">
                <view class="moneyBg"> {{ processingStatus }} </view>
                <view class="date" v-if="afterSalesTotalStatus == 6">{{ cancelApplyTime }}</view>
                <view class="afterSalesService" v-if="afterSalesTotalStatus !== 6">
                    <view class="afterSalesService_left">
                        <van-icon name="shield-o" color="#FF6203" style="margin-right:16rpx;font-size: 24rpx;" />
                        <view class="afterSalesService_left_text" v-for="(item, index) in afterSalesServiceList"
                            :key="index">
                            {{ item.name }} <span style="margin-left: 40rpx;margin-right: 40rpx;" v-if="index < (afterSalesServiceList.length - 1)">|</span>
                        </view>
                    </view>
                    <view class="afterSalesService_right">
                        <van-icon name="arrow" color="#FF6203" size="12" />
                    </view>
                </view>
            </view>
            <view class="serviceStatus" v-if="afterSalesType==1 || afterSalesType == 2 || (afterSalesType==4 && isShowFullFlow==1)">
                <view class="serviceStatusTop"> <view class="serviceStatusTitle">服务进度</view> </view>
                <view class="serviceStatusSteps">
                    <view class="progress-container">
                        <view class="progressItem" v-for="(step, index) in steps" :key="index" >
                            <view class="progress-step completed">
                                <view class="step-icon"><img :src="index <= activeIndex ? activeIcon : inactiveIcon" alt=""></view>
                                <view class="step-label">{{ step.text }}</view>
                            </view>
                            <view class="progress-line-Item"
                                style="height: 34rpx; line-height: 34rpx; display: flex; flex-direction: column; justify-content: center;"
                                v-if="index <= (steps.length - 2)">
                                <view :class="['progress-line', index < activeIndex ? 'completed' : '']"></view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="goodsDetail">
                <view class="wraper_top" v-for="(item,index) in productInfoList" :key="index">
                    <view class="goodsPic">
                        <img class="img" :src="item.imgUrl" mode="widthFix" />
                    </view>
                    <view class="goodsText">
                        <view class="goodsTop">
                            <view class="goods_T">{{ item.productName }}</view>
                            <view class="goods_price"> <span style="font-size: 28rpx;">退款 ￥</span> <span style="font-size:28rpx;">{{ refundGoods.applyAmount?refundGoods.applyAmount:0 }} </span> <span><img
                                    src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/jinbi.png"
                                    alt="" style="width: 10px; height: 10px; margin: 0px 5px;padding: 0;">{{ refundGoods.applyPoints }} </span> </view>
                        </view>
                        <view class="goodsMiddle">
                            <view class="goods_specs">{{ item.specName?item.specName:'默认' }}</view>
                            <view class="goods_num">X {{ item.buyNum }}</view>
                        </view>
                    </view>
                </view>
                <view class="wraper_bottom">
                    <view class="refundReason box wraper_bottom_item">
                        <view class="refundText">退款原因</view>
                        <view class="refundR">{{ reasonTypeText }}</view>
                    </view>
                    <view class="refundScore box t24 wraper_bottom_item">
                        <view class="refundText">申请时间</view>
                        <view class="refundR">{{ refundGoods.applyTime }}</view>
                    </view>
                    <view class="refundCode box t24 wraper_bottom_item">
                        <view class="refundText">订单编号</view>
                        <view class="refundR refundCode">
                            <view class="code">{{ refundGoods.orderNo }}</view>
                            <view class="" style=" color: #111111; margin: 0px 10px;">|</view>
                            <view class="copy" @tap="copytext">复制</view>
                        </view>
                    </view>
                    <view class="refundScore box t24 wraper_bottom_item">
                        <view class="refundText">实付金额</view>
                        <view class="refundR" style="display: flex;align-items: center;">
                            <span > ￥{{ refundGoods.applyAmount }}</span>
                            <span><img
                                    src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/jinbi_gray1127.png"
                                    alt="" style="width: 10px; height: 10px; margin: 0px 5px;padding: 0;">{{ refundGoods.applyPoints }} </span>
                        </view>
                    </view>
                </view>
            </view>
            <template v-if="afterSalesTotalStatus == 4">
                <!-- 彩色的线 -->
                <view class="clearfix">
                    <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/colorLine.png"
                        alt="" style=" display:block; width: 100%; height:3px;" />
                </view>
                <view class="refundDetail">
                    <view class="refundAmount box">
                        <view class="refundText">退款金额</view>
                        <view class="refundNum">￥{{ refundGoods.applyAmount }}</view>
                    </view>
                    <view class="refundScore box t24">
                        <view class="refundText">退回积分</view>
                        <view class="refundNum"> <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/jinbi.png"  alt=""
                            style="height: 10px; width: 10px;margin-left: 6px;margin-right: 6px;padding: 0;"> {{ refundGoods.applyPoints }}</view>
                    </view>
                    <view class="refundCoupon box t24">
                        <view class="refundText">退回优惠券</view>
                        <view class="refundNum">{{ refundGoods.refundCouponCount?refundGoods.refundCouponCount:0 }}张券</view>
                    </view>
                </view>
            </template>
        </scroll-view>
        <view class="bottom">
            <van-button v-if="afterSalesTotalStatus == 4 || afterSalesTotalStatus == 6 ||afterSalesTotalStatus == 5" type="default"  class="submitBtn" @click="checkedHistory()">售后历史</van-button>
            <van-button v-else type="default"  class="submitBtn" @click="cancelApply()" hover-class=" background-color: transparent; border: 2rpx solid #ff6202; font-size: 32rpx; color: #ff6203;">取消申请</van-button>
        </view>
        <van-toast id="van-toast" />
        <van-popup id="popup" :show="isPopupShow" @close="onPopupClose" position="bottom" custom-style="height: 20%" round>
            <view class="popup-content">
                <view class="popup-title">确定要取消本次售后申请吗?</view>
                <view class="popup-buttons">
                    <button class="cancel-button" @tap="onCancel">暂不取消</button>
                    <button class="confirm-button" @tap="onConfirmCancelAfterSales">确认取消</button>
                </view>
            </view>
        </van-popup>
    </view>
</template>

<script>
import {getAfterSalesOrderDetailApi,cancelAfterSalesOrderApi} from "@/api/order";

export default {
    data() {
        return {
            navBarTitle: '退款中',
            processingStatus:'平台处理中', //售后处理状态
            scrolling:false,
            refundMoney:'52',
            cancelApplyTime:'2024-10-12 18:20',
            refundAmount:'52',
            refundScore:'4540', //退回积分
            refundCoupon:1,//退回优惠券数量
            refundReason:'其他',
            applyDate:'apply', //申请时间
            refundCode:'3466777777888',
            Outlay:25, //实付金额
            usePoints:100,//实际使用积分
            afterSalesServiceList:[
                {
                    name:'7天无理由退货',
                },
                {
                    name:'假一赔三',
                }
            ],
            productInfoList: {
                // orderNum:'343434343313131',
                // orderStatus:'待收货',
                // goodsId:11,
                // imgUrl: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge01.png',
                // productName:'黄芪杞姜枣糕红枣',
                // productPrice:'96',
                // buyNum:'1',
                // maxUsefulPoints:190,
                // actualPayAmount:'156',
                // specName:'口味一：五斤装',
                // logistics:''
            },
            actualPayAmount:0, //实际支付金额
            maxUsefulPoints:0,
            refundGoods:{ },
            isCancel:true,
            activeIndex:0,
            steps: [
                {
                    text: '提交申请',
                    activeIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png'
                },
                {
                    text: '平台审核',
                    activeIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png'
                },
                {
                    text: '平台处理',
                    activeIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png'
                },
                {
                    text: '已完成',
                    activeIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png'
                }
            ],
            activeIcon:
                'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png',  
            inactiveIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/noCheck0113.png', 
            params:undefined, //接受从路由传过来的参数
            sourceType:undefined,
            orderId:undefined,
            orderStatus:undefined,
            isPopupShow:false, // 控制弹窗的显示隐藏
            afterSalesId:undefined, //'174687511417851904'
            reasonTypeText:undefined,
            afterSalesTotalStatus:undefined, //售后总状态
            //    SUBMITTED(0, "提交申请"),
            //    PLATFORM_REVIEW(1, "平台审核"),
            //    PENDING_SELF_DELIVERY(2, "待送自提点"),
            //    PLATFORM_PROCESSING(3, "平台处理"),
            //    COMPLETED(4, "已完成"),
            //    CANCEL_APPLY(6, "取消申请"),
            //    REJECT(5, "拒绝申请");

            afterSalesStatusText:{
                0: "提交申请",
                1: "平台审核中",  //平台审核
                2: "待送自提点",
                3: "平台处理中",
                4: "已完成",
                5: "申请平台未通过", //拒绝申请
                6: "已撤销，退款关闭" //取消申请
            },
            lineWidth: 124, // 初始连接线宽度
            isCanceling: false, // 添加防抖状态
            afterSalesType:undefined, // 售后类型1=退货退款, 2=退款, 3=其他 4=服务退款
            REASON_MAPPING :{
                '成分与描述不符': 'INGREDIENTS_NOT_MATCH_DESCRIPTION',
                '协商一致退款': 'CONSENSUS_REFUND',
                '发错货物': 'WRONG_GOODS',
                '质量问题': 'QUALITY_PROBLEM',
                '少件': 'MISSING_ITEMS',
                '其他': 'OTHER'
            },
            reasonTypeMap:{
                'INGREDIENTS_NOT_MATCH_DESCRIPTION': '成分与描述不符',
                'CONSENSUS_REFUND': '协商一致退款',
                'WRONG_GOODS': '发错货物',
                'QUALITY_PROBLEM': '质量问题',
                'MISSING_ITEMS': '少件',
                'OTHER': '其他'
            },
            isShowFullFlow:0   //是否显示完成的流程  0= 不显示 1=显示
        }
    },


    onLoad(data) {
        if(data && data.params){
            this.params=JSON.parse(decodeURIComponent(data.params))
            console.log(this.params)
            this.sourceType=this.params.sourceType 
            this.orderId=this.params.orderId || undefined
            this.orderStatus=this.params.orderStatus || undefined
            this.afterSalesType = this.params.afterSalesType || undefined //2 退款 1 退货退款 3其他  4 服务退款 
            this.afterSalesId = this.params.afterSalesId || '174687511417851904'
        }
    },
    onReady () {
        this.calculateStepDistance();
        // 监听窗口变化重新计算
        uni.onWindowResize(() => {
            this.calculateStepDistance();
        });
    },
    onShow () {
        // 获取售后进度详情
        this.getAfterSalesOrderDetail(this.afterSalesId)
        
    },
    methods: {
        // 滑动
        scrollPage(e) {
            console.log(e.detail.scrollTop, this.scrolling)
            if (e.detail.scrollTop > 25 && !this.scrolling) {
                this.scrolling = true
            } else if ((e.detail.scrollTop <= 25 && this.scrolling) || (e.detail.scrollTop <= 25 && !this.scrolling)) {
                this.scrolling = false
            }
        },
        // 返回键
        onClickLeft () {
            const pageParams = {
                sourceType: this.sourceType,
                activeTab:5, //第五个tab栏
                orderStatus:8 //售后的订单状态
            }
            // 根据来源类型跳转不同页面
            switch(this.sourceType) {
                case 'judgeOrderDetail':
                    uni.redirectTo({
                        url: '/pages/orders/myOrder?params=' + encodeURIComponent(JSON.stringify(pageParams))
                    });
                    break;
                case 'orderDetails':
                    uni.redirectTo({
                        url: '/pages/orders/myOrder?params=' + encodeURIComponent(JSON.stringify(pageParams))
                    });
                    break;
                case 'orderService':
                    uni.redirectTo({
                        url: '/pages/orders/myOrder?params=' + encodeURIComponent(JSON.stringify(pageParams))
                    });
                    break;
                default:
                    uni.navigateBack();
            }
        },
        calculateStepDistance() {
            this.$nextTick(() => {
                const query = uni.createSelectorQuery().in(this);
                query.select('.progress-container').boundingClientRect(containerRect => {
                    query.select('.progress-step').boundingClientRect(stepRect => {
                        if (containerRect && stepRect) {
                            // 计算两个步骤之间的间距
                            const containerWidth = containerRect.width;
                            const stepCount = this.steps.length;
                            const stepWidth = stepRect.width;
                            // 计算连接线宽度 = (容器宽度/步骤数) - 步骤宽度
                            this.lineWidth = Math.floor((containerWidth / (stepCount - 1)) - stepWidth);
                        }
                    }).exec();
                }).exec();
            });
        },

        // 修改售后进度
        changeAfterSalesProcessList(type,status){
            console.log(type,status)
            if(status == 6){
                this.steps = [
                    { text: '提交申请', activeIcon: this.activeIcon },
                    { text: '平台审核', activeIcon: this.activeIcon },
                    { text: '取消申请', activeIcon: this.activeIcon },
                ]
            }else if(status == 5){
                this.steps = [
                    { text: '提交申请', activeIcon: this.activeIcon },
                    { text: '平台审核', activeIcon: this.activeIcon },
                    { text: '平台拒绝该申请', activeIcon: this.activeIcon },
                ]
            }else{
                if (type == 2) { //退款
                    this.steps = [
                        { text: '提交申请', activeIcon: this.activeIcon },
                        { text: '平台审核', activeIcon: this.activeIcon },
                        { text: '平台处理', activeIcon: this.activeIcon },
                        { text: '已完成', activeIcon: this.activeIcon }
                    ]

                } else if (type == 1) { //退货退款
                    this.steps = [
                        { text: '提交申请', activeIcon: this.activeIcon },
                        { text: '平台审核', activeIcon: this.activeIcon },
                        { text: '待送至自提点', activeIcon: this.activeIcon },
                        { text: '平台处理', activeIcon: this.activeIcon },
                        { text: '已完成', activeIcon: this.activeIcon }
                    ]
                }
            }
           
        },
        // 复制
        copytext (text) {
            var that = this;
            wx.setClipboardData({
                data: that.refundCode,
                success: function (res) {
                wx.showToast({
                    title: '复制成功',
                    icon: 'success',
                    duration: 2000
                });
                }
            })
        },
        checkedHistory(){
            uni.navigateTo({
                url: '/pages/afterSales/history?params=' + encodeURIComponent(JSON.stringify({afterSalesId:this.afterSalesId}))
            });
        },
        // 取消申请弹窗 
        cancelApply(){
            this.isPopupShow = true;
        },
        // 取消弹窗
        onPopupClose() {
            this.isPopupShow = false;
        },
        onConfirmCancelAfterSales() {
            if (this.isCanceling) return; // 如果正在取消中，直接返回
                this.isCanceling = true; // 设置防抖状态
            // 点击“确认取消”后的逻辑，比如发起取消售后申请的接口请求等
            console.log('点击了确认取消');
            try{
                cancelAfterSalesOrderApi(this.afterSalesId).then(res=>{
                    console.log(res)
                    if(res.code==200){
                        this.isPopupShow=false
                        uni.showToast({
                            title: '取消成功',
                            icon:'success',
                            duration: 2000
                        });
                        this.processingStatus = this.afterSalesStatusText[6] || '平台处理中'
                        this.changeAfterSalesProcessList(this.afterSalesType,6)

                        // 要刷新页面
                        this.getAfterSalesOrderDetail(this.afterSalesId)
                    }
                })
            }catch(error){
                console.log(error)
                uni.showToast({
                    title: '取消失败,请稍后重试',
                    icon: 'none'
                });
            }finally {
                this.isCanceling = false; // 无论成功失败都重置状态
            }

        },
        onCancel() {
            console.log('点击了暂不取消');
            this.isPopupShow=false

        },
        // 售后进度详情 
        getAfterSalesOrderDetail(afterSalesId){
            getAfterSalesOrderDetailApi(afterSalesId).then(res=>{
                console.log(res)
                if(res.code==200){
                    this.refundGoods = res?.data || null
                    const reasonType = res.data.refundType || 2;
                    console.log('reasonType:', res.data.refundType)
                    console.log('mapped value:', this.reasonTypeMap[reasonType])
                    this.reasonTypeText = (reasonType !== undefined && reasonType !== '' ) ? (this.reasonTypeMap[reasonType] || '其他') : '其他';
                    console.log(this.refundGoods,'refundGoods',this.reasonTypeText,'reasonTypeText')
                    this.productInfoList = res?.data?.productInfoList || []
                    this.afterSalesTotalStatus = res?.data?.afterSalesStatus || res?.data?.afterSalesTotalStatus ||0
                    console.log(this.afterSalesTotalStatus,'afterSalesTotalStatus')
                    this.processingStatus = this.afterSalesStatusText[this.afterSalesTotalStatus] || '平台处理中'
                    this.changeAfterSalesProcessList(this.afterSalesType,this.afterSalesTotalStatus)
                    if(this.afterSalesType == 2){
                        this.activeIndex = this.afterSalesTotalStatus <= 1? this.afterSalesTotalStatus : (this.afterSalesTotalStatus == 4? (this.afterSalesStatus -1):3)
                    }else{
                        this.activeIndex = this.afterSalesTotalStatus <= 4 ? this.afterSalesTotalStatus : 3
                    }
                    console.log(this.afterSalesTotalStatus,this.activeIndex)
                    this.cancelApplyTime = res?.data?.applyTime || this.getCurrentDate()
                    if(this.productInfoList.length ==1){
                        this.actualPayAmount = this.productInfoList[0].actualPayAmount || 0
                    }
                    this.isShowFullFlow = res?.data?.isShowFullFlow || 0
                    
                }
            })
        },
        // 获取当前日期时间
        getCurrentDate() {
            const now = new Date();
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0');
            const day = String(now.getDate()).padStart(2, '0');
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            return `${year}-${month}-${day} ${hours}:${minutes}`;
        }

    }
}
</script>

<style lang="scss" scoped>
.content {
    background-color: #ffffff;
    display: flex;
    flex-direction:column;
    height:100vh;
    overflow:hidden;
    box-sizing: border-box;
}
.scroll-content {
    flex: 1;
    height: 1px;
}

// 页面顶部的内容
.pageTop{
    background: #ffffff;

}
.pageTopStyle{
    padding-bottom: 80rpx;
    border-bottom: 4rpx solid #efefef;
}
.moneyBg{
    margin-top: 17px;
    margin-left: 24px;
    margin-right: 24px;
    display: flex;
    align-items: center;
    color: #333333;
    font-size: 56rpx;
    line-height: 56rpx;

}
// 售后服务保障
.afterSalesService{
    margin-top: 24rpx;
    margin-left: 48rpx;
    margin-right: 48rpx;
    border-radius: 16rpx;
    background: rgb(255, 98, 3, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24rpx 20rpx;

    .afterSalesService_left{
        display: flex;
        align-items: center;
        color: #FF6203;
    }
    .afterSalesService_left_text{
        font-size: 24rpx;
        line-height: 24rpx;
        text-align: left;
        color: #ff6203;
    }
}

.date{
    margin-top:24rpx;
    padding: 0px 48rpx ;
    font-size: 24rpx;
    text-align: left;
    color: #666;
}
/* 进度条 */

//服务状态
.serviceStatus {
    // padding-top: 55rpx;
    margin: 48rpx 48rpx 0rpx 48rpx;
    border-bottom: 1px solid #f0f0f0;
    // background: #f9f9f9;

    .serviceStatusTop {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .serviceStatusTitle {
            font-size: 36rpx;
            line-height: 36rpx;
            text-align: left;
            color: #333333;
        }

        .act_more {
            line-height: 24rpx;
            vertical-align: middle;
            height: 24rpx;
            font-size: 24rpx;
            text-align: right;
            color: #666666;

            .act_t {
                color: #888888;
                font-size: 24rpx;
                line-height: 24rpx;
                margin-right: 17rpx;
            }

            .act_Im {
                vertical-align: -2rpx;
            }
        }
    }

    .serviceStatusSteps {
        padding-top:40rpx;
        padding-bottom: 52rpx;


        .progress-container {
            display: flex;
            align-items: center;
            margin-top: 30rpx;
            justify-content: space-between;
        }

        .progressItem {
            position: relative;
            flex: 1;
        }

        .progress-step {
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
        }

        .step-icon {
            width: 34rpx;
            height: 34rpx;
            border-radius: 50%;
            // background-color: #D4D4D4;
            // color: white;
            display: flex;
            justify-content: center;
            align-items: center;

            // font-size: 12px;
            img {
                width: 34rpx;
                height: 34rpx;
            }
        }

        .completed.step-icon {
            background-color: #FF6203;
        }

        .step-label {
            margin-top: 34rpx;
            font-size: 24rpx !important;
            line-height:24rpx;
            text-align: center;
            color: #333333;
            white-space: nowrap;
            /* 防止文本换行 */
            overflow: hidden;
            /* 超出部分隐藏 */
            text-overflow: ellipsis;
            /* 显示省略号 */
        }

        .progress-line-Item {
            position: absolute;
            top: 0rpx;
            left: 70rpx;
            left: calc(50% + 9rpx);
            width: calc(100% - 22rpx);
        }

        .progress-line {
            height: 4rpx;
            // width: 124rpx;
            width: 100%;
            background-color: #D4D4D4;
            margin: 0rpx 8rpx;
        }

        .completed.progress-line {
            background-color: #FF6203;
        }
    }
}
.refundDetail{
    padding: 48rpx 48rpx 150rpx 48rpx;
    margin-bottom: 300rpx;
}
.box{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.refundText{
    color: #111111;
    font-size: 28rpx;
}
.refundNum{
    font-size: 28rpx;
}
.refundR{
    font-size: 24rpx;
    color: #888888;
}
/* dingdan编号 */
.refundCode{
    display: flex;
    align-items: center;
}
/* 复制两个字体 */
.copy {
    font-size: 24rpx;
    text-align: right;
    color: #111111;
    line-height: 24rpx;
  }
.goodsDetail {
    margin-top: 25px;
    padding: 0px 48rpx 48rpx 48rpx;
    width: calc(100% - 48px)

}
.wraper_top {
    display: flex;
    width: 100%;
    margin-bottom: 20rpx;
}
.wraper_top:last-child {
    margin-bottom: 0;
}

.goodsPic {
    // width: 25%;
    width: 160rpx;
    height: 160rpx;
    border-radius: 8rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

}
.goodsPic img {
    border-radius: 8rpx;
    // width: 100%;
    // height: auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 关键：裁剪图片而不是压缩 */
    object-position: center center;
    /* 可以调整为 top, bottom 等 */
}
.goods_tips {
    margin-top: 6px;
    font-size: 11px;
    text-align: left;
    color: #888888;
    line-height: 11px;
}

.goodsText {
    width: 75%;
    margin-left: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 5px;
    padding-bottom: 6px;
    text-align: left;
}


.goodsTop {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.goods_T {
    max-width: 60%;
    font-size:28rpx;
    text-align: left;
    color: #333333;
    line-height: 28rpx;
    white-space: nowrap;
    /* 防止文本换行 */
    overflow: hidden;
    /* 超出部分隐藏 */
    text-overflow: ellipsis;
    /* 显示省略号 */
}

/* // 商品价格 */
.goods_price {
    font-size: 28rpx;
    color: #333333;
    line-height: 28rpx;
    display: flex;
    align-items: center;
}

.goodsMiddle {
    // margin-top: 16rpx;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

}

.goods_specs {
    max-width: 80%;
    font-size: 28rpx;
    text-align: left;
    color: #666666;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.goods_num {
    font-size: 28rpx;
    line-height: 28rpx;
    color: #666666;
}

.goodsBottom{
    position: absolute;
    bottom: 10%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    color: #111111;
}


.wraper_bottom{
    margin-top: 40rpx;
}
.btnArea {
    // margin-top: 15px;
    padding: 48rpx 48rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0;
    width: calc(100% - 96rpx);

    // 黑字黑框按钮
    .submitBtn {
        border-radius: 40rpx;
        background: #fff;
        border: 2rpx solid #ff6202;
        font-size: 32rpx;
        color: #ff6203;
        text-align: center;
        height: 80rpx;
        line-height:80rpx;
        padding-left: 10px;
        padding-right: 10px;
        width: 100%;
    }

    .btnAreaRight {
        display: flex;
        justify-content: space-between;



        button {
            border: 1px solid #111111;
        }
    }
}

.bottom{
    padding-top: 32rpx;
}
::v-deep .van-nav-bar__left {
    width: 56px;
    height: 44px;
}

::v-deep #navBar .van-icon {
    color: #242629 !important;
}
::v-deep .van-cell{
    padding-left: 0px !important;
    border-bottom: 1px solid #f9f9f9;
}


 .t24{
    margin-top: 24rpx;
 }



 .popup-content {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
}
.popup-title {
  text-align: center;
  font-size: 16px;
  margin-bottom: 20px;
}
.popup-buttons {
  display: flex;
  justify-content: space-around;
}
.cancel-button {
    color: #666666;
    font-size: 32rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    border-radius: 40rpx !important;
    background: #fff;
    border: 2rpx solid #666;
    width: 40%;
}

.confirm-button {
    color: white;
    background-color: #ff6700;
    /* 橙色示例颜色 */
    border: none;
    border-radius: 40rpx !important;
    background: #ff6203;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    font-size: 32rpx;
    width: 40%;
}
.afterSalesService_right{
    line-height: 20rpx;
}
::v-deep .afterSalesService_right .van-icon{
    font-size: 20rpx!important;
    height: 20rpx;
}

::v-deep .van-button--default {
    width: 100%;
    border-radius: 40rpx;
    background: #fff;
    border: 2rpx solid #ff6202;
    font-size: 32rpx;
    color: #ff6203;
}

::v-deep .van-button--active {
    background-color: #ffffff !important;
    border: 2rpx solid #ff6202;
    font-size: 32rpx;
    color: #ff6203;
}
</style>
